<template>
<div id="header">
	<div class="">
		<img src="../../assets/img/logo.png" alt="logo" />
	</div>
	<ul class="clearfix">
		<li><a @click="changeLocale" >{{ lang }}</a></li>
		<li>
			<router-link to='/enterpriseApplicate'>{{ $lang('ENTERPRISE_ACCOUNT_APPLICATE') }}</router-link>
		</li>
		 <!-- <li>
			<router-link to='/financeOutline' v-if="this.$store.state.common.companyId !== null">{{ $lang('FINANCE_SITUATION') }}</router-link>
		</li>
        <li>
			<router-link to='/companyInfo' v-if="this.$store.state.common.companyId !== null">{{ $lang("COMPANY_INFO") }}</router-link>
		</li>
		<li>
			<router-link to='/companyOutline' v-if="this.$store.state.common.companyId !== null">{{ $lang("COMPANY_INTRODUCE") }}</router-link>
		</li> -->
		<li>
			<router-link to='/allCompany' >{{ $lang("ALL_COMPANY") }}</router-link>
		</li>
		<li>
			<router-link to='/'>{{ $lang("BLOCK_CHAIN_BROWSER") }}</router-link>
		</li>
	</ul>
</div>
</template>

<script>
export default {
	data(){
		return {
			lang:"EN"
		}
	},
	created(){
        this.$i18n.locale === 'zh' ? this.lang = 'EN' : this.lang = 'CN' ;
	},
	methods:{
		changeLocale(){
			this.$confirm(this.$lang('CONFIRM_CHANGE'), this.$lang('TIP'), {
                confirmButtonText: this.$lang('el.messagebox.confirm'),
                cancelButtonText: this.$lang('el.messagebox.cancel'),
                type: 'warning'
            }).then(() => {
                // console.log('切换');
                let locale = this.$i18n.locale;
                // 切换语言 
                locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh';
                // 切换EN/ZN标识
                this.$i18n.locale === 'zh' ? this.lang = 'EN' : this.lang = 'CN';
                //   console.log('切换完成')
                // 保存语言类型
                this.$local.save('locale',this.$i18n.locale);
            }).catch(() => {
                this.$message({
                    message: this.$lang('CANCEL_CHANGE'),
                    type: 'success',
                    showClose:true,
                    duration:1000
                })      
            })
		}
	}
}
</script>

<style lang="scss">
#header {
	background-color: #1D2849;
	height:72px;
	line-height: 72px;
	border-bottom: 1px solid #212c4f;
	min-width: 100%;
	overflow: hidden;
	margin:  0 auto;
	position: fixed;
	left: 0;
	top:0;
	z-index: 10;
	& > div {
		float: left;
		line-height: 72px;
		height: 72px;
		padding-left: 20px;
		img {
			vertical-align: middle;
			line-height: 72px;
		}
	}
	ul {
		line-height: 72px;
		padding-right: 20px;
		li {
			float: right;
			a {
				padding: 0 14px;
				color: #CCCCCC;
				cursor:pointer; 
				font-size: 14px;
				&:hover {
					color: #FFF;
				}
			}
		}
	}
}
</style>